<template>
	<view class="page">
		<topVue title="物流信息"></topVue>
		<view class="padding30">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view>
					<view class="content_info">
						<view>包裹{{index + 1}}/{{list.length}}</view>
						<view>{{item.item.trackingNumber}}</view>
					</view>
					<view style="display: flex;">
						<img style="width: 80px;margin-left: 5px;border-radius: 5px;object-fit: cover;" :src="item.item.picUrl" />
						<view>{{item.item.spuName}}</view>
					</view>
				</view>
				<view class="wuliu_inof">
					<view v-if="item.expressTrackList.length < 1">暂无物流</view>
					<view v-else v-for="(wuliu,index) in item.expressTrackList" >
						<text style="line-height: 1; padding-left: 20rpx; color: #333; font-weight: 600;">{{item.time | formatTime("YMDHMS")}}</text>
							<view class=" flex align-center">
								<view class="dot"></view>
							</view>
							<view class="content">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <u-empty text="暂无物流信息" mode="address" margin-top="300" v-if="list.length===0"></u-empty> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			};
		},
		async onLoad(option) {
			await this.showtrack(option.value)
		},
		methods: {
			// 查看物流
			async showtrack(id){
				const res = await this.$request("/app-api/trade/order/get-express-track-list", "GET",{
					id: id
				})
				if(res.code===0) {
				
					let list = res.data
					list.forEach(item=>{
						console.log("获取到的订单信息",item.expressTrackList.length)
					})
					this.list = list.reverse()
					console.log(this.list)
				}
			},
		}
	}
</script>

<style lang="less">
	.content_info{
		display: flex;
		    justify-content: space-between;
		    padding: 5px;
		    margin-bottom: 5px;
		    background: #eef2f5;
		    border-radius: 5px;
	}
	.wuliu_inof{
		height: 100rpx;
	}
	.item {
		width: 100%;
		margin-bottom: 30rpx;
		.dot {
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			background: #1CC289;
		}
		.content {
			line-height: 40rpx;
			color: #333;
			padding-top: 20rpx;
		}
	}
	
</style>
